<!--
 * @Author: xuzehan h935351619@163.com
 * @Date: 2025-02-18 13:51:52
 * @LastEditors: xuzehan h935351619@163.com
 * @LastEditTime: 2025-04-09 10:07:52
 * @FilePath: \qlck-vue\src\views\subsystem\operationMonitoring.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="bodycard">
    <div class="desInfoBox">
      <a-descriptions title="主机基本信息" style="border:1px">
        <a-descriptions-item label="IP地址">
          {{ des.localIpAddress }}
        </a-descriptions-item>
        <!-- <a-descriptions-item label="端口号">
          {{ des.prot }}
        </a-descriptions-item>
        <a-descriptions-item label="连接状态">
          {{ des.channalState }}
        </a-descriptions-item> -->

        <a-descriptions-item label="CPU占用率">
          <a-progress type="circle" :percent="Number(des.systemCpuUsage)">
            <template #format="percent">
              <span style="color:#fff">{{ des.systemCpuUsage }}%</span>
            </template>
          </a-progress>
        </a-descriptions-item>
        <a-descriptions-item label="内存占用率">
          <a-progress type="circle" :percent="Number(des.memoryUsage)">
            <template #format="percent">
              <span style="color:#fff">{{ des.memoryUsage }}%</span>
            </template>
          </a-progress>
        </a-descriptions-item>
      </a-descriptions>

      <!-- <a-descriptions title="内存信息" >
        <a-descriptions-item label="CPU占用率">
          <a-progress type="circle" :percent="des.systemCpuUsage" />
        </a-descriptions-item>
        <a-descriptions-item label="内存占用率">
          <a-progress type="circle" :percent="des.memoryUsage" />
        </a-descriptions-item>
      </a-descriptions> -->
    </div>
    <TCPchannal ref="TCPchannal" class="TCPchannal" />
    <!-- <a-card title="实时报文接收" style="width:100%" v-if="false">
      <a-table :columns="columns" :data-source="data">
        <a slot="name" slot-scope="text">{{ text }}</a>
      </a-table>
    </a-card> -->
    <!-- <a-card title="FTP文件发送" style="width: 50%">
      FTP文件发送
    </a-card>
   <a-card title="TCP数据流发送" style="width: 50%">
       TCP数据流发送
    </a-card> -->
  </div>
</template>

<script>
import TCPchannal from '@/views/dashboard/modules/TCPchannal.vue'
import { getAction } from '@/api/manage'
export default {
  components: { TCPchannal },
  data() {
    return {
      url: {
        list: '/sys/info/getSystemInfo'
      },
      des: {
        localIpAddress: '192.168.1.12',
        prot: '1005',
        channalState: 1,
        systemCpuUsage: 15,
        memoryUsage: 18
      },
      columns: [
        {
          title: '来源',
          dataIndex: 'origin',
          key: 'origin'
        },
        {
          title: '长度',
          dataIndex: 'length',
          key: 'length',
          width: 80
        },
        {
          title: '接收时间',
          dataIndex: 'time',
          key: 'time'
        },
        {
          title: '报文',
          dataIndex: 'message',
          key: 'message',
          ellipsis: true
        }
      ],
      data: [
        { origin: '192.168.1.125', length: 16, time: '2025-02-01 15:26:14', message: 'AAFF051101250D45' },
        { origin: '192.168.1.123', length: 16, time: '2025-02-01 15:26:19', message: 'AAFF051101250D28' },
        { origin: '192.168.1.124', length: 16, time: '2025-02-01 15:26:16', message: 'AAFF051101250D28' },
        { origin: '192.168.1.126', length: 16, time: '2025-02-01 15:26:12', message: 'AAFF051101250D28' },
        { origin: '192.168.1.127', length: 16, time: '2025-02-01 15:26:11', message: 'AAFF051101250D28' }
      ],
      timer: null
    }
  },
  mounted() {
    if (this.timer) {
      clearInterval(this.timer)
    }
    this.timer = setInterval(() => {
      this.getlist()
    }, 1000)
  },
  destroyed() {
    clearInterval(this.timer)
  },
  methods: {
    getlist() {
      getAction(this.url.list).then(res => {
        this.des = Object.assign({}, res.result)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.bodycard {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  // align-items: center;
  height: calc(100vh - 100px);
  padding: 50px 10px 70px 10px;
}
.desInfoBox {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 30px 10px;
}
</style>
<style>
.bodycard .desInfoBox .ant-descriptions .ant-descriptions-title {
  color: #fff !important;
}
</style>
